<template>
    <div class="app">
        <!-- 父传子 :titles=[""]数组的值传给子组件 -->
        <Movies @movieslist="listcontent" :titles="['你的名字', '天气之子', '玲芽之旅']"></Movies>
        <!-- 注册点击事件 点击数组的值触发 子传父 -->
        <!-- 记录索引 -->
        <h2>{{ more[nowindex] }}</h2>
        <!-- 作用域插槽 -->
        <Movies @movieslist="listcontent" :titles="['你的名字', '天气之子', '玲芽之旅']">
            <tempalate #default="props">
                <button>{{ props.item }}</button>
            </tempalate>
        </Movies>
    </div>
</template>
<script>
import Movies from './Movies.vue'
export default {
    components: {
        Movies
    },
    data() {
        return {
            more: ["2017你的名字", "2020天气之子", "2023玲芽之旅"],
            nowindex: 0//当前索引
        }
    },
    methods: {
        // 拿到子组件传来的索引
        listcontent(index) {
            this.nowindex = index
        }
    }
}
</script>
<style scoped lang="less">
h2 {
    text-align: center;
    color: #ffc88e;
}
</style>